<template>
  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content" :class="modalContentClass">
      <button class="close-button" @click="closeModal"></button>
      <div class="modal-header"></div>
      <div class="modal-content-overlay"></div>
      <slot></slot> 
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, ref } from 'vue';

interface Props {
  isVisible: boolean;
  modalType?: string; // Added modalType prop
}

const props = defineProps<Props>();

const modalContentClass = computed(() => {
  if (props.modalType === 'fxjh') {
    return 'fxjh'; // Class for fxjh type
  } else if (props.modalType === 'yfrw') {
    return 'yfrw'; // Class for yfrw type
  }
  return 'fxjh'; // Default no extra class
});
// const modalBackground = computed(() => {
//   switch (props.modalType) {
//     case 'fxjh': //飞行计划
//       return new URL('./assets/bak-fxjh.svg', import.meta.url).href;
//     case 'yfrw': //预发任务
//       return new URL('./assets/bak-yfrw.svg', import.meta.url).href;
//     default:
//       return new URL('./assets/bak-fxjh.svg', import.meta.url).href; // Default background
//   }
// });
const emit = defineEmits(['close']);

const closeModal = () => {
  emit('close');
};
</script>

<style scoped lang="scss">
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* Semi-transparent background - REMOVED */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* Ensure modal is on top */
}
.fxjh{
  background: url('./assets/bak-fxjh.svg') 0% 0% / 100% 100% no-repeat;
}
.yfrw{
  background: url('./assets/bak-yfrw.svg') 0% 0% / 100% 100% no-repeat;
}
.modal-content {
  width: 450px;
  height: 342px;
  position: relative;
  /* background: url('./assets/bak-fxjh.svg') 0% 0% / 100% 100% no-repeat; */ /* Moved to dynamic style binding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(2.27px);
  .modal-header{
    height: 32px;
    width: 100%;
  }
  .modal-content-overlay{
    width: 450px;
    height: 64px;
    background: url('./assets/overlay.svg') 0% 0% / 100% 100% no-repeat;
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: 2;
  }
}

.close-button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 36px;
  height: 36px;
  background-image: url('./assets/close.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 0;
  /* Hide the text content */
}
</style>